<!DOCTYPE html>
<html>

<head>
    <title>课程管理</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Fonts -->
    <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:300,400' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Lato:300,400,700,900' rel='stylesheet' type='text/css'>
    <!-- CSS Libs -->
    <link rel="stylesheet" type="text/css" href="../../lib/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../../lib/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="../../lib/css/animate.min.css">
    <link rel="stylesheet" type="text/css" href="../../lib/css/bootstrap-switch.min.css">
    <link rel="stylesheet" type="text/css" href="../../lib/css/checkbox3.min.css">
    <link rel="stylesheet" type="text/css" href="../../lib/css/jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="../../lib/css/dataTables.bootstrap.css">
    <link rel="stylesheet" type="text/css" href="../../lib/css/select2.min.css">
    <!-- CSS App -->
    <link rel="stylesheet" type="text/css" href="../../css/style.css">
    <link rel="stylesheet" type="text/css" href="../../css/themes/flat-blue.css">

 <!-- 引入vue框架 -->
 <script src="../../lib/js/vue.js"></script>
 <!-- 引入axios库 -->
 <script src="../../lib/js/axios.js"></script>
 <!-- 引入config -->
 <script src="../../lib/js/config.js"></script>
    <style>
        /* 模态框样式 */
        .modal {
            display: none;
            /* 默认隐藏 */
            position: fixed;
            /* 固定位置 */
            z-index: 1;
            /* 确保在最上层 */
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.4);
            /* 半透明背景 */
        }

        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            /* 垂直居中 */
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            max-width: 500px;
            padding: 20px;
            border-radius: 8px;
            /* 圆角 */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            /* 阴影效果 */
        }

        /* 表单字段样式 */
        .modal-content form {
            display: flex;
            flex-direction: column;
        }

        .modal-content form label {
            margin-top: 10px;
        }

        .modal-content form input {
            margin-top: 5px;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            /* 输入框圆角 */
            transition: border-color 0.3s;
        }

        .modal-content form input:focus {
            border-color: #66afe9;
            outline: none;
        }

        .modal-content form button {
            margin-top: 20px;
            padding: 10px 15px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            /* 按钮圆角 */
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .modal-content form button:hover {
            background-color: #0056b3;
        }

        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
    </style>
</head>

<body class="flat-blue">
    <div class="app-container">
        <div class="row content-container">
            <nav class="navbar navbar-default navbar-fixed-top navbar-top">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <button type="button" class="navbar-expand-toggle">
                            <i class="fa fa-bars icon"></i>
                        </button>
                        <ol class="breadcrumb navbar-breadcrumb">
                            <li>课程管理</li>
                            <li class="active">课程管理</li>
                        </ol>
                        <button type="button" class="navbar-right-expand-toggle pull-right visible-xs">
                            <i class="fa fa-th icon"></i>
                        </button>
                    </div>
                    <ul class="nav navbar-nav navbar-right">
                        <button type="button" class="navbar-right-expand-toggle pull-right visible-xs">
                            <i class="fa fa-times icon"></i>
                        </button>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                aria-expanded="false"><i class="fa fa-comments-o"></i></a>
                            <ul class="dropdown-menu animated fadeInDown">
                                <li class="title">
                                    Notification <span class="badge pull-right">0</span>
                                </li>
                                <li class="message">
                                    No new notification
                                </li>
                            </ul>
                        </li>
                        <li class="dropdown danger">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                aria-expanded="false"><i class="fa fa-star-half-o"></i> 4</a>
                            <ul class="dropdown-menu danger  animated fadeInDown">
                                <li class="title">
                                    Notification <span class="badge pull-right">4</span>
                                </li>
                                <li>
                                    <ul class="list-group notifications">
                                        <a href="#">
                                            <li class="list-group-item">
                                                <span class="badge">1</span> <i
                                                    class="fa fa-exclamation-circle icon"></i> new registration
                                            </li>
                                        </a>
                                        <a href="#">
                                            <li class="list-group-item">
                                                <span class="badge success">1</span> <i class="fa fa-check icon"></i>
                                                new orders
                                            </li>
                                        </a>
                                        <a href="#">
                                            <li class="list-group-item">
                                                <span class="badge danger">2</span> <i class="fa fa-comments icon"></i>
                                                customers messages
                                            </li>
                                        </a>
                                        <a href="#">
                                            <li class="list-group-item message">
                                                view all
                                            </li>
                                        </a>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li class="dropdown profile">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                                aria-expanded="false">Emily Hart <span class="caret"></span></a>
                            <ul class="dropdown-menu animated fadeInDown">
                                <li class="profile-img">
                                    <img src="../../img/profile/picjumbo.com_HNCK4153_resize.jpg" class="profile-img">
                                </li>
                                <li>
                                    <div class="profile-info">
                                        <h4 class="username">Emily Hart</h4>
                                        <p>emily_hart@email.com</p>
                                        <div class="btn-group margin-bottom-2x" role="group">
                                            <button type="button" class="btn btn-default"><i class="fa fa-user"></i>
                                                Profile</button>
                                            <button type="button" class="btn btn-default"><i class="fa fa-sign-out"></i>
                                                Logout</button>
                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </nav>
            <div class="side-menu sidebar-inverse">
                <nav class="navbar navbar-default" role="navigation">
                    <div class="side-menu-container">
                        <div class="navbar-header">
                            <a class="navbar-brand" href="#">
                                <div class="icon fa fa-paper-plane"></div>
                                <div class="title">Flat Admin V.2</div>
                            </a>
                            <button type="button" class="navbar-expand-toggle pull-right visible-xs">
                                <i class="fa fa-times icon"></i>
                            </button>
                        </div>
                        <ul class="nav navbar-nav">
                            <li>
                                <a href="../index.html">
                                    <span class="icon fa fa-tachometer"></span><span class="title">首页</span>
                                </a>
                            </li>
                            <li class="panel panel-default dropdown">
                                <a data-toggle="collapse" href="#dropdown-element">
                                    <span class="icon fa fa-desktop"></span><span class="title">用户管理</span>
                                </a>
                                <!-- Dropdown level 1 -->
                                <div id="dropdown-element" class="panel-collapse collapse">
                                    <div class="panel-body">
                                        <ul class="nav navbar-nav">
                                            <li><a href="../personalInformation.html">个人信息管理</a></li>
                                            <li><a href="../viewCourse.html">查看课程</a></li>
                            </li>
                            >
                        </ul>
                    </div>
            </div>
            </li>
            <li class="active panel panel-default dropdown">
                <a data-toggle="collapse" href="#dropdown-table">
                    <span class="icon fa fa-table"></span><span class="title">学生信息管理</span>
                </a>
                <!-- Dropdown level 1 -->
                <div id="dropdown-table" class="panel-collapse collapse">
                    <div class="panel-body">
                        <ul class="nav navbar-nav">
                            <li><a href="../table/studentInformationManage.html">学生信息管理</a>
                            </li>
                        <li><a href="../table/selectCourse.html">学生选课管理</a>
                        </li> 
                        <li><a href="../table/deleteCourse.html">学生退课管理</a>
                        </li> 
                        </ul>
                    </div>
                </div>
            </li>
            <li class="panel panel-default dropdown">
                <a data-toggle="collapse" href="#dropdown-form">
                    <span class="icon fa fa-file-text-o"></span><span class="title">班级管理</span>
                </a>
                <!-- Dropdown level 1 -->
                <div id="dropdown-form" class="panel-collapse collapse">
                    <div class="panel-body">
                        <ul class="nav navbar-nav">
                            <li><a href="../form/class.html">班级管理</a>
                            </li>

                        </ul>
                    </div>
                </div>
            </li>
            <!-- Dropdown-->
            <li class="panel panel-default dropdown">
                <a data-toggle="collapse" href="#component-example">
                    <span class="icon fa fa-cubes"></span><span class="title">课程管理</span>
                </a>
                <!-- Dropdown level 1 -->
                <div id="component-example" class="panel-collapse collapse">
                    <div class="panel-body">
                        <ul class="nav navbar-nav">
                            <li><a href="components/course.html">课程管理</a>
                            </li>
                            <!--<li><a href="../components/chartjs.html">Chart.JS</a>
                            </li>-->
                        </ul>
                    </div>
                </div>
            </li>
            <!-- Dropdown-->
            <li class="panel panel-default dropdown">
                <a data-toggle="collapse" href="#dropdown-example">
                    <span class="icon fa fa-slack"></span><span class="title">成绩管理</span>
                </a>
                <!-- Dropdown level 1 -->
                <div id="dropdown-example" class="panel-collapse collapse">
                    <div class="panel-body">
                        <ul class="nav navbar-nav">
                            <li><a href="../score.html">学生查看个人成绩</a>
                            </li>
                            <li><a href="../scoreManagement.html">老师添加成绩、修改成绩</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </li>
            <!-- Dropdown-->
            <li class="panel panel-default dropdown">
                <a data-toggle="collapse" href="#dropdown-icon">
                    <span class="icon fa fa-archive"></span><span class="title">系统管理</span>
                </a>
                <!-- Dropdown level 1 -->
                <div id="dropdown-icon" class="panel-collapse collapse">
                    <div class="panel-body">
                        <ul class="nav navbar-nav">
                            <li><a href="../log.html">日志管理</a>
                            </li>
                            <!--<li><a href="../icons/font-awesome.html">Font Awesomes</a>
                            </li>-->
                        </ul>
                    </div>
                </div>
            </li>
            <li>
                <a href="../license.html">
                    <span class="icon fa fa-thumbs-o-up"></span><span class="title">License</span>
                </a>
            </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
        </nav>
    </div>
    <!-- Main Content -->
    <div class="container-fluid">
        <div class="side-body">

            <div class="row">


                <div class="col-md-4">
                    <!-- 首页 -->
                    <a href="../index.html">
                        <img src="../../home.png" alt="">
                    </a>

                    <!-- 设置图标大小 -->
                    <style>
                        img {
                            width: 30px;
                            height: 30px;
                        }
                    </style>
                </div>



                <!-- 录入课程信息 -->
                <div class="col-md-4">
                    <a href="#" id="openModal">
                        <img src="../../addClass.png" alt="">添加课程信息
                    </a>
                </div>


                <!--录入课程信息模态框  -->
                <div id="openAddModal" class="modal">
                    <div class="modal-content">
                        <span class="close">&times;</span>
                        <h2>添加课程信息</h2>
                        <form id="courseForm">
                            <label for="courseId">课程号:</label>
                            <input type="number" id="courseId" name="courseId" required>

                            <label for="courseTeacher">教师:</label>
                            <input type="text" id="courseTeacher" name="courseTeacher" required>

                            <label for="courseName">课程名:</label>
                            <input type="text" id="courseName" name="courseName" required>

                            <label for="courseCredit">课程学分:</label>
                            <input type="text" id="courseCredit" name="courseCredit" required>

                            <button type="submit">确定</button>
                            <button type="button" onclick="closeModel1()">取消</button>
                        </form>
                    </div>
                </div>



                <!-- 修改学生信息模态框 -->
                <div id="openUpdateModal" class="modal">
                    <div class="modal-content">
                        <span class="close">&times;</span>
                        <h2>修改课程</h2>
                        <form id="courseForm_update">
                            <label for="updateCourseId">课程号:</label>
                            <input type="number" id="updateCourseId" name="updateCourseId" required readonly>

                            <label for="updateCourseTeacher">教师:</label>
                            <input type="text" id="updateCourseTeacher" name="updateCourseTeacher" required>

                            <label for="updateCourseName">课程名:</label>
                            <input type="text" id="updateCourseName" name="updateCourseName" required>

                            <label for="updateCourseCredit">课程学分:</label>
                            <input type="text" id="updateCourseCredit" name="updateCourseCredit" required>

                            <button type="submit">确定</button>
                            <button type="button" id="cancelUpdateButton">取消</button>
                        </form>
                    </div>
                </div>


              
            </div>

        <div id="courseInformationManagement">
            <div class="col-xs-12">
                <div class="card">

                    <div class="card-header">
                        <div class="card-title">
                            <div class="title">课程列表</div>
                        </div>
                    </div>

                    <div class="card-body">
                        <!-- 点击选择按钮，出现复选框，勾选课程，进行操作 -->
                        <button id="showCheckboxesButton" class="btn btn-primary">选择</button>
                        <button id="selectAllButton" class="btn btn-primary" style="display: none;">全选</button>
                        <button id="deleteSelectedButton" class="btn btn-primary" style="display: none;">退课</button>
                        <!-- <button id="DOMContentLoaded" class="btn btn-primary" style="display: none;">修改</button> -->

                         <!-- 模糊查询-->
                         <!-- <div class="col-md-4">
                            <form class="form-inline" @submit.prevent="queryStudentByNameOrId">
                                <div class="form-group mx-sm-3 mb-2">
                                    <label for="inputSearch" class="sr-only">输入查询信息</label>
                                    <input type="text" class="form-control" name="keyword" id="inputSearch"
                                        placeholder="输入查询信息" v-model="keyword">
                                </div>
                                <button type="button" class="btn btn-primary mb-2"
                                    @click="queryStudentByNameOrId">查询</button>
                    
                            </form>
                        </div> -->

                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>|</th>
                                    <th scope="col">#</th>
                                    <th scope="col">课程号</th>
                                    <th scope="col">教师</th>
                                    <th scope="col">课程名称</th>
                                    <th scope="col">学分</th>
                                    <!-- <th scope="col">查看已选课学生</th> -->


    
                                </tr>
                            </thead>
                            <tbody>
                                <tbody>
                                    <tr v-for="(course, index) in courseList" :key="course.course_id">
                                        <!-- 复选框 -->
                                        <td><input type="checkbox" class="row-checkbox" id="checkbox-1" style="display: none;"></td>
                                        <th scope="row">{{ index + 1 }}</th>
                                        <td>{{ course.courseId }}</td>
                                        <td>{{ course.courseTeacher }}</td>
                                        <td>{{ course.courseName }}</td>
                                        <td>{{ course.courseCredit }}</td>
                                    <!-- <td><a href="">查看</a></td> -->

                                    </tr>
                                </tbody>
                              
                        </table>


                       <!--分页  -->
                       <div class="paging">
                        <nav aria-label="Page navigation example">
                            <ul class="pagination justify-content-end">
                                <li class="page-item" :class="{ disabled: currentPage === 1 }">
                                    <a class="page-link" href="#" @click.prevent="getCourseList(currentPage - 1)">上一页</a>
                                </li>
                                <li class="page-item" v-for="page in pageList" :key="page" :class="{ active: currentPage === page }">
                                    <a class="page-link" href="#" @click.prevent="getCourseList(page)">{{ page }}</a>
                                </li>
                                <li class="page-item" :class="{ disabled: currentPage === pageList.length }">
                                    <a class="page-link" href="#" @click.prevent="getCourseList(currentPage + 1)">下一页</a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>


                    </div>
                </div>
            </div>
        </div>
            <!-- 警告框 -->




            <div class="col-xs-12">
                <div class="card">

                    <div class="card-header">
                        <div class="card-title">
                            <div class="title">优秀课程</div>
                        </div>
                    </div>

                    <div class="card-body">
                        <!-- 优秀课程风采 -->

                        <div class="row">
                            <!-- 课程1 -->
                            <div class="card-deck">
                                <div class="col-md-4">
                                    <div class="card">
                                        <img src="../../1.jpg" class="card-img-top" alt="..."
                                            style="width: 400px; height: 300px;">
                                        <div class="card-body">
                                            <h5 class="card-title">Card title</h5>
                                            <p class="card-text">This is a wider card with supporting text below as a
                                                natural lead-in to additional content. This content is a little bit
                                                longer.</p>
                                        </div>
                                        <div class="card-footer">
                                            <small class="text-muted">Last updated 3 mins ago</small>
                                        </div>
                                    </div>
                                </div>

                                <!-- 课程2 -->
                                <div class="col-md-4">
                                    <div class="card">
                                        <img src="../../2.jpg" class="card-img-top" alt="..."
                                            style="width: 400px; height: 300px;">
                                        <div class="card-body">
                                            <h5 class="card-title">Card title</h5>
                                            <p class="card-text">This is a wider card with supporting text below as a
                                                natural lead-in to additional content. This content is a little bit
                                                longer.</p>
                                        </div>
                                    </div>
                                    <div class="card-footer">
                                        <small class="text-muted">Last updated 3 mins ago</small>
                                    </div>
                                </div>
                            </div>
                            <!-- 课程3 -->
                            <div class="col-md-4">
                                <div class="card">
                                    <img src="../../3.jpg" class="card-img-top" alt="..."
                                        style="width: 400px; height: 300px;">
                                    <div class=" card-body">
                                        <h5 class="card-title">Card title</h5>
                                        <p class="card-text">This is a wider card with supporting text below as a
                                            natural lead-in to additional content. This content is a little bit
                                            longer.</p>
                                    </div>
                                    <div class="card-footer">
                                        <small class="text-muted">Last updated 3 mins ago</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>










        <script>
            Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
            var courseInformation = new Vue({
                el: '#courseInformationManagement',
                data: {
                    courseList: [], // 初始化为空数组
                    currentPage: 1, // 初始化为1
                    pageList: [], // 分页列表
                    keyword: '',
                    course: {
                        courseId: '',
                        courseTeacher: '',
                        courseName: '',
                        courseCredit:''
                    }
                },
                mounted() {
                    this.getCourseList(this.currentPage);
                },
                methods: {
                    // 分页显示学生信息
                    getCourseList(page) {
                        this.currentPage = page;
                        axios.get('/course/queryCourseByPage/' + page).then(response => {
                        // 确保返回的数据结构正确
                        console.log('获取到的课程列表:', response.data); // 添加这行代码以调试
                        this.courseList = response.data.data['courseList'];
                        this.pageList = response.data.data['pageList'];
                        }).catch(error => {
                            console.error('获取列表失败:', error);
                        });
                },
                    // 添加学生信息
                    addCourse(course) {
                        axios.post('/course/addCourse', course).then(response => {
                            console.log("添加课程信息", course);
                            this.getCourseList(this.currentPage);
                        }).catch(error => {
                            console.error('添加课程失败:', error);
                        });
                    },
                    // 修改学生信息
                    updateCourse(course) {
                        axios.post('/course/updateCourse/' , course).then(response => {
                            this.getCourseList(this.currentPage);
                            console.log("修改课程信息成功:", course);
                        }).catch(error => {
                            console.error('修改课程失败:', error);
                        });
                    },
                    //删除课程信息
                    deleteCourse(courseId) {
                        axios.get('/course/deleteCourse/' + courseId).then(response => {

                            if (response.data.data == true) {
                                this.getCourseList(this.currentPage);
                                console.log("删除学生信息", courseId);
                            } else {
                                console.error("删除失败:");
                            }
                        })
                    },
                    
                }
            });








    document.addEventListener('DOMContentLoaded', function () {
    document.getElementById('showCheckboxesButton').addEventListener('click', function () {
        var checkboxes = document.querySelectorAll('.row-checkbox');
        var selectAllButton = document.getElementById('selectAllButton');
        var deleteSelectedButton = document.getElementById('deleteSelectedButton');

        checkboxes.forEach(function (checkbox) {
            if (checkbox.style.display === 'none') {
                checkbox.style.display = 'block';
            } else {
                checkbox.style.display = 'none';
            }
        });

        // 显示或隐藏全选和删除按钮
        if (selectAllButton.style.display === 'none') {
            selectAllButton.style.display = 'inline-block';
            deleteSelectedButton.style.display = 'inline-block';
            document.getElementById('DOMContentLoaded').style.display = 'inline-block'; // 修正这里的 DOMContentLoaded
        } else {
            selectAllButton.style.display = 'none';
            deleteSelectedButton.style.display = 'none';
            document.getElementById('DOMContentLoaded').style.display = 'none'; // 修正这里的 DOMContentLoaded
        }
    });

    // 全选按钮事件
    document.getElementById('selectAllButton').addEventListener('click', function () {
        var checkboxes = document.querySelectorAll('.row-checkbox');
        checkboxes.forEach(function (checkbox) {
            checkbox.checked = true;
        });
    });

   

    //删除选中的课程
    document.getElementById('deleteSelectedButton').addEventListener('click', function () {
                // 显示确认弹窗
                var confirmDelete = confirm('确认删除？');

                if (confirmDelete) {
                    // 用户点击了确认按钮
                    // 获取所有选中的复选框
                    var checkboxes = document.querySelectorAll('.row-checkbox:checked');

                    if (checkboxes.length === 0) {
                        // 如果没有选中的复选框，弹出提示
                        alert('请选择一个选项！');
                    } else {
                        // 否则，删除选中的行
                        checkboxes.forEach(function (checkbox) {
                            // 获取课程号所在的单元格
                            const courseIdCell = checkbox.parentElement.nextElementSibling.nextElementSibling;
                            const courseId = courseIdCell.textContent.trim(); // 获取课程号并去除空格
                            courseInformation.deleteCourse(courseId); // 调用删除方法
                            checkbox.parentElement.parentElement.remove(); // 删除选中的行
                        });
                    }
                }
            });

    // 录入课程信息模态框
    // 获取模态框
    var addModal = document.getElementById("openAddModal");

    // 获取打开模态框的按钮
    var openAddModalBtn = document.getElementById("openModal");

    // 获取关闭模态框的<span>元素
    var closeAddModalSpan = document.getElementsByClassName("close")[0];

    // 当用户点击按钮时，打开模态框
    openAddModalBtn.onclick = function () {
        addModal.style.display = "block";
    }

    // 当用户点击<span> (x) 时，关闭模态框
    closeAddModalSpan.onclick = function () {
        addModal.style.display = "none";
    }

    // 处理表单提交
    document.getElementById("courseForm").addEventListener("submit", function (event) {
        event.preventDefault(); // 阻止表单默认提交行为

        // 获取表单数据
        var courseId = document.getElementById("courseId").value;
        var courseTeacher = document.getElementById("courseTeacher").value;
        var courseName = document.getElementById("courseName").value;
        var courseCredit = document.getElementById("courseCredit").value;

        // 构建课程对象
        var course = {
            courseId: courseId,
            courseTeacher: courseTeacher,
            courseName: courseName,
            courseCredit: courseCredit
        };

        // 调用Vue实例中的addCourse方法
        courseInformation.addCourse(course);

        // 关闭模态框
        addModal.style.display = "none";

        // 清空表单
        document.getElementById("courseForm").reset();
    });

    // 取消，关闭模态框
    function closeModel1() {
        var modal = document.getElementById("openAddModal");
        modal.style.display = "none";
    }

    // 修改
    document.getElementById('DOMContentLoaded').addEventListener('click', function () {
        const checkboxes = document.querySelectorAll('.row-checkbox');
        const checkedCheckboxes = Array.from(checkboxes).filter(checkbox => checkbox.checked);
        if (checkedCheckboxes.length > 1) {
            alert('只能选择一个选项！');
        } else if (checkedCheckboxes.length === 1) {
            // 处理单个选中的复选框
            console.log('选中的复选框:', checkedCheckboxes[0]);

            // 显示模态框
            var updateModal = document.getElementById("openUpdateModal");
            updateModal.style.display = "block";
        } else {
            alert('请选择一个选项！');
        }
    });

    // 修改
    document.getElementById('DOMContentLoaded').addEventListener('click', function () {
        const checkboxes = document.querySelectorAll('.row-checkbox');
        const checkedCheckboxes = Array.from(checkboxes).filter(checkbox => checkbox.checked);

        if (checkedCheckboxes.length > 1) {
            alert('只能选择一个选项！');
        } else if (checkedCheckboxes.length === 1) {
            // 获取选中行的数据
            const selectedRow = checkedCheckboxes[0].closest('tr');
            const courseId = selectedRow.cells[2].innerText; // 课程号
            const courseTeacher = selectedRow.cells[3].innerText; // 班主任
            const courseName = selectedRow.cells[4].innerText; // 课程名
            const courseCredit  = selectedRow.cells[5].innerText; // 学分

            // 填充模态框表单
            document.getElementById('updateCourseId').value = courseId;
            document.getElementById('updateCourseTeacher').value = courseTeacher;
            document.getElementById('updateCourseName').value = courseName;
            document.getElementById('updateCourseCredit').value = courseCredit;
            // 显示模态框
            var updateModal = document.getElementById("openUpdateModal");
            updateModal.style.display = "block";
        } else {
            alert('请选择一个选项！');
        }
    });

    // 获取取消按钮元素
    var cancelUpdateButton = document.getElementById("cancelUpdateButton");

    // 绑定取消按钮事件
    cancelUpdateButton.addEventListener('click', function () {
        var updateModal = document.getElementById("openUpdateModal");
        updateModal.style.display = "none";
    });

    // 表单提交事件处理
    document.getElementById("courseForm_update").onsubmit = function (event) {
        event.preventDefault(); // 阻止表单默认提交行为

       // 获取表单数据
        var courseId = document.getElementById("updateCourseId").value;
        var courseTeacher = document.getElementById("updateCourseTeacher").value;
        var courseName = document.getElementById("updateCourseName").value;
        var courseCredit = document.getElementById("updateCourseCredit").value;

        // 构建课程对象
        var course = {
            courseId: courseId,
            courseTeacher: courseTeacher,
            courseName: courseName,
            courseCredit: courseCredit
        };

/* 
        // 这里可以添加处理表单数据的逻辑，比如发送到服务器
        console.log("课程号: " + classId);
        console.log("课程名: " + className);
        console.log("班主任: " + classTeacher); */

        // 调用 Vue 实例中的 updateClass 方法
        courseInformation.updateCourse(course);
       

        // 关闭模态框
        var updateModal = document.getElementById("openUpdateModal");
        updateModal.style.display = "none";
    }
            });



        </script>

    </div>


    </div>
    </div>

    <footer class="app-footer">
        <div class="wrapper">
            <span class="pull-right" style="text-align: center;">2.1 <a href="#"><i
                        class="fa fa-long-arrow-up"></i></a></span> © 2024-12-LUT-PRACTICE
        </div>
    </footer>









    <!-- Javascript Libs -->
    <script type="text/javascript" src="../../lib/js/jquery.min.js"></script>
    <script type="text/javascript" src="../../lib/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../../lib/js/Chart.min.js"></script>
    <script type="text/javascript" src="../../lib/js/bootstrap-switch.min.js"></script>

    <script type="text/javascript" src="../../lib/js/jquery.matchHeight-min.js"></script>
    <script type="text/javascript" src="../../lib/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="../../lib/js/dataTables.bootstrap.min.js"></script>
    <script type="text/javascript" src="../../lib/js/select2.full.min.js"></script>
    <script type="text/javascript" src="../../lib/js/ace/ace.js"></script>
    <script type="text/javascript" src="../../lib/js/ace/mode-html.js"></script>
    <script type="text/javascript" src="../../lib/js/ace/theme-github.js"></script>
    <!-- Javascript -->
    <script type="text/javascript" src="../../js/app.js"></script>


</body>

</html>